<template>
  <div class="app-container">
    <h3>组卷信息</h3>
    <el-card style="margin-top: 20px">
      <div style="float: right; font-weight: bold; color: #ff0000">
        试卷总分：{{ examDto.totalScore }}分
      </div>

      <div>
        <el-button
          class="filter-item"
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >
          添加题库
        </el-button>

        <el-table
          :data="examDto.examRepos"
          :border="false"
          empty-text="请点击上面的`添加题库`进行设置"
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column label="题库" width="200">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.repoId"
                placeholder="请选择"
                @change="repoChange(scope.row)"
              >
                <el-option
                  v-for="item in repoList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="单选数量" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.radioCount"
                :min="0"
                :max="scope.row.totalRadio"
                :controls="false"
                style="width: 60%"
              />
              / {{ scope.row.totalRadio }}
            </template>
          </el-table-column>

          <el-table-column label="单选分数" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.radioScore"
                :min="0"
                :controls="false"
                style="width: 60%"
              />
            </template>
          </el-table-column>

          <el-table-column label="多选数量" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.multiCount"
                :min="0"
                :max="scope.row.totalMulti"
                :controls="false"
                style="width: 60%"
              />
              / {{ scope.row.totalMulti }}
            </template>
          </el-table-column>

          <el-table-column label="多选分数" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.multiScore"
                :min="0"
                :controls="false"
                style="width: 60%"
              />
            </template>
          </el-table-column>

          <el-table-column label="判断题数量" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.judgeCount"
                :min="0"
                :max="scope.row.totalJudge"
                :controls="false"
                style="width: 60%"
              />
              / {{ scope.row.totalJudge }}
            </template>
          </el-table-column>

          <el-table-column label="判断题分数" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.judgeScore"
                :min="0"
                :controls="false"
                style="width: 60%"
              />
            </template>
          </el-table-column>

          <el-table-column label="简答题数量" align="center">
            <template slot-scope="scope">
              <el-input-number
                style="width: 60%"
                v-model="scope.row.jdtCount"
                :max="scope.row.totalJdt"
                :min="0"
                :controls="false"
              />
              / {{ scope.row.totalJdt }}
            </template>
          </el-table-column>

          <el-table-column label="简答题分数" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.jdtScore"
                :min="0"
                :controls="false"
                style="width: 60%"
              />
            </template>
          </el-table-column>

          <el-table-column label="删除" align="center" width="80px">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeItem(scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <h3>考试配置</h3>
    <el-card style="margin-top: 20px">
      <el-form
        ref="examDto"
        :model="examDto"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="考试名称" prop="title">
          <el-input v-model="examDto.title" />
        </el-form-item>

        <el-form-item label="考试描述" prop="content">
          <el-input v-model="examDto.content" type="textarea" />
        </el-form-item>

        <el-form-item label="总分数" prop="totalScore">
          <el-input-number :value="examDto.totalScore" disabled />
        </el-form-item>

        <el-form-item label="及格分" prop="qualifyScore">
          <el-input-number
            v-model="examDto.qualifyScore"
            :max="examDto.totalScore"
          />
        </el-form-item>

        <el-form-item label="考试时长(分钟)" prop="totalTime">
          <el-input-number v-model="examDto.totalTime" />
        </el-form-item>

        <el-form-item label="是否限时">
          <el-checkbox v-model="examDto.timeLimit" />
        </el-form-item>

        <el-form-item
          v-if="examDto.timeLimit"
          label="考试时间"
          prop="totalTime"
        >
          <el-date-picker
            v-model="dateValues"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>

    <h3>权限配置</h3>
    <el-card style="margin-top: 20px">
      <el-radio-group v-model="examDto.openType" style="margin-bottom: 20px">
        <el-radio :label="1" border>完全公开</el-radio>
        <el-radio :label="2" border>部门开放</el-radio>
        <el-radio :label="3" border>指定人员</el-radio>
      </el-radio-group>

      <el-alert
        v-if="examDto.openType === 1"
        title="开放的，任何人都可以进行考试！"
        type="warning"
      />

      <div v-if="examDto.openType === 2">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />

        <el-tree
          ref="tree"
          empty-text=" "
          :data="treeData"
          default-expand-all
          show-checkbox
          node-key="id"
          :default-checked-keys="examDto.departIds"
          :props="filterText"
          :filter-node-method="filterNode"
          @check-change="handleCheckChange"
        />
      </div>

      <div v-if="examDto.openType === 3">
        <el-checkbox v-model="checked">张三</el-checkbox>
        <el-checkbox v-model="checked">李四</el-checkbox>
      </div>
    </el-card>

    <div style="margin-top: 20px">
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>
<script>
import { findDepartAll } from "@/api/depart";
import { findAll } from "@/api/repo";
import { save, findById } from "@/api/exam";
export default {
  data() {
    return {/*  */
      treeData: [], //部门数据
      dateValues: [],
      repoList: [],
      examDto: {
        timeLimit: false,
        openType: 1,
        examRepos: [],
        departIds: [],
      },
      filterText: "",
      checked: 0,
    };
  },
  watch: {
    "examDto.examRepos": {
      handler(newVal, oldVal) {
        var totalScore = 0;
        newVal.forEach((item) => {
          // console.log(item.radioCount * item.radioScore);
          totalScore += item.radioCount * item.radioScore;
          totalScore += item.multiCount * item.multiScore;
          totalScore += item.judgeCount * item.judgeScore;
          totalScore += item.jdtCount * item.jdtScore;
        });
        this.examDto.totalScore = totalScore;

        //强制刷新试图
        this.$forceUpdate();
      },
      deep: true,
    },
    dateValues: {
      handler() {
        // console.log("????????????");
        this.examDto.startTime = this.dateValues[0];
        this.examDto.endTime = this.dateValues[1];
      },
    },
  },
  methods: {
    handleCheckChange(a, b, c) {
      var nodes = this.$refs.tree.getCheckedNodes();
      console.log(nodes);
      var departIds = [];
      nodes.forEach((node) => {
        departIds.push(node.id);
      });

      this.examDto.departIds = departIds;
    },
    handleAdd() {
      this.examDto.examRepos.push({
        repoId: "",
        radioCount: 0,
        radioScore: 0,
        multiCount: 0,
        multiScore: 0,
        judgeCount: 0,
        judgeScore: 0,
        jdtCount: 0,
        jdtScore: 0,
      });
    },
    removeItem(index) {
      this.examDto.examRepos.splice(index, 1);
    },
    findRepoList() {
      findAll().then((res) => {
        console.log("res" + res);
        this.repoList = res;
      });
    },
    findDepart() {
      findDepartAll().then((res) => {
        // console.log(res);
        this.treeData = res.data;
      });
    },
    filterNode() {},
    handleSave() {
      this.examDto.timeLimit = this.examDto.timeLimit ? 1 : 0;
      save(this.examDto).then((res) => {
        if (res.code == 0) {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "error",
          });
        }
      });
      this.examDto.departIds = departIds;
    },
    handleAdd() {
      this.examDto.examRepos.push({
        repoId: "",
        radioCount: 0,
        radioScore: 0,
        multiCount: 0,
        multiScore: 0,
        judgeCount: 0,
        judgeScore: 0,
        jdtCount: 0,
        jdtScore: 0,
      });
    },
    removeItem(index) {
      this.examDto.examRepos.splice(index, 1);
    },
    findRepoList() {
      // console.log("111");

      findAll().then((res) => {
        // console.log(res);
        this.repoList = res;
      });
    },
    findDepart() {
      findDepartAll().then((res) => {
        this.treeData = res;
      });
    },
    repoChange(item) {
      var repoEntity = {};
      this.repoList.forEach((repo) => {
        if (repo.id == item.repoId) {
          repoEntity = repo;
        }
      });

      item.totalRadio = repoEntity.radioCount;
      item.totalMulti = repoEntity.multiCount;
      item.totalJudge = repoEntity.judgeCount;
      item.totalJdt = repoEntity.jdtCount;
    },
  },
  created() {
    if (this.$route.query.id) {
      findById(this.$route.query.id).then((res) => {
        // console.log(res);
        //组卷信息
        //赋初始值
        res.data.examRepos.forEach((item) => {
          this.examDto.examRepos.push({
            repoId: item.repoId,
            radioCount: item.radioCount || 0,
            radioScore: item.radioScore || 0,
            multiCount: item.multiCount || 0,
            multiScore: item.multiScore || 0,
            judgeCount: item.judgCount || 0,
            judgeScore: item.judgeScore || 0,
            jdtCount: item.jdtCount || 0,
            jdtScore: item.jdtScore || 0,
          });
        });
        //考试配置
        this.examDto.title = res.data.title;
        this.examDto.content = res.data.content;
        this.examDto.totalScore = res.data.totalScore;
        this.examDto.qualifyScore = res.data.qualifyScore;
        this.examDto.totalTime = res.data.totalTime;
        this.examDto.timeLimit = res.data.timeLimit ? true : false;
        if(res.data.startTime){          
          this.dateValues = [
            res.data.startTime,
            res.data.endTime
          ];
        }
        //权限配置
        this.examDto.openType=res.data.openType;
      });
    }

    //查询题库列表
    this.findRepoList();

    //获取部门数据
    this.findDepart();
  },
};
</script>